<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>具体番剧介绍</title>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}

		</style>
	</head>
	<body>

		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->
		
		<!--简介开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-12">

						 <div class="card mb-3" >
						   <div class="row no-gutters">
						     <div class="col-md-3">
						       <img th:src="@{/s_img/}+${fan.fid}+@{.png}" style="height: 320px;width: 240px" class="card-img" alt="...">
						     </div>
						     <div class="col-md-9">
						       <div class="card-body">
						         <h5 class="card-title" th:text="${fan.fname}"></h5>
						         <p class="card-text" th:text="${fan.description}"></p>
								 <p class="card-text"><small class="text-muted">总播放:[[${fan.totalamount}]] | 系列追番人数:[[${fan.fans}]]</small></p>
						         <p class="card-text"><small class="text-muted">[[${fan.airtime}]]开播</small></p>
								 <a href="#" class="btn btn-primary" th:if="${isZhui=='true'}" th:href="@{/cancelZhui2/}+${fan.fid}+@{/}+${session.uid}">取消追番</a>
								 <a href="#" class="btn btn-primary" th:href="@{/updateZhui2/}+${fan.fid}+@{/}+${session.uid}" th:unless="${isZhui}">追番</a>
						       </div>
						     </div>
						   </div>
						 </div>
					</div>
					
				</div>
				
			</div>
		</section>
		
		<!--简介结束-->

		<!--作品详情+评论开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<nav>
							<div class="nav nav-tabs" id="nav-tab" role="tablist">
								<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">作品详情</a>
								<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">短评</a>
								<a class="nav-item nav-link disabled" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">长评</a>
							</div>
						</nav>
						<div class="tab-content" id="nav-tabContent">
							<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
								<div class="card mt-4">
									<div class="card-body">
										<h5 class="card-title">作品详情</h5>
										<hr />
										<p class="card-text">正片</p>
										<span th:with="episodes=${fan.episodes}">
											  <span th:if="${episodes<10}">
												  <span th:each="i:${#numbers.sequence(1,episodes)}">
													  <a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
												  </span>
											  </span>
											  <span th:unless="${episodes<10}">
												  <span th:each="i:${#numbers.sequence(1,9)}">
													<a href="#" class="btn btn-primary mt-1 py-2">0[[${i}]]</a>
												  </span>
												  <span th:each="i:${#numbers.sequence(10,episodes)}">
													<a href="#" class="btn btn-primary mt-1 py-2">[[${i}]]</a>
												  </span>
											  </span>
										  </span>
										<hr />

										<h5 class="card-title">相关推荐</h5>
										<div class="media mt-4">
											<img th:src="@{/img/fan01.png}" class="align-self-start mr-3" alt="...">
											<div class="media-body">
												<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么</h5>
												<p>简介：迷宫都市欧拉丽是一座拥有雄伟地下迷宫（通称“地下城”）的巨大都市。为了实现英雄故事中“在地下城邂逅迷人女主角”而进入迷宫的少年贝尔·克朗尼，却被强大怪物“弥诺陶洛斯”袭击。危急之际，顶尖冒险者艾丝·华伦斯坦出面拯救了贝尔，被艾丝的英勇举动感动的贝尔更因此爱慕着对方，将对方当成目标，希望能成为配得上她的男人。</p>
											</div>
										</div>

										<div class="media mt-4">
											<img th:src="@{/img/fan02.png}" class="align-self-start mr-3" alt="...">
											<div class="media-body">
												<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么 第二季</h5>
												<p>简介：这座城市住着众多的神，其中心存在着通往地心深处——深渊的“地下城”。城市的名字是迷宫都市欧拉丽。女神赫斯缇雅与冒险者贝尔·克朗尼，一如既往地是主神和仅仅一名眷族的最小构成。但达成了世界最快升级这一伟业的贝尔，开始受到前所未有的的万众瞩目——迷宫中的相遇，以及冒险——这是再次开始编织的，少年所走过的，女神所记录的【眷族物语】</p>
											</div>
										</div>

										<div class="media mt-4">
											<img th:src="@{/img/fan03.png}" class="align-self-start mr-3" alt="...">
											<div class="media-body">
												<h5 class="mt-0">在地下城寻求邂逅是否搞错了什么 第三季</h5>
												<p>简介：这座城市住着众多的神，其中心存在着通往地心深处——深渊的“地下城”。城市的名字是迷宫都市欧拉丽。女神赫斯缇雅与冒险者贝尔·克朗尼，一如既往地是主神和仅仅一名眷族的最小构成。但达成了世界最快升级这一伟业的贝尔，开始受到前所未有的的万众瞩目——迷宫中的相遇，以及冒险——这是再次开始编织的，少年所走过的，女神所记录的【眷族物语】</p>
											</div>
										</div>

									</div>
								</div>
							</div>

							<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
								<div class="card mt-4">
									<ul class="list-unstyled">
										<span th:each="barrage:${allBarrage}">
											<li class="media my-2 ml-3">
												<img src="../img/70_70.jpg" class="mr-3 profile" alt="...">
												<div class="media-body">
													<h5 class="mt-0 mb-1" th:text="${barrage.nickname}"></h5>
													<small class="text-muted" th:text="${barrage.date}"></small>
													<button type="button" class="btn btn-secondary float-right mr-5">...</button>
													<hr />
													<p th:text="${barrage.barrage}"></p>
												</div>
											</li>
										</span>
										<hr />
									</ul>

								</div>
							</div>

						</div>

					</div>
				</div>

			</div>
		</section>

		<!--作品详情+评论结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
	</body>
</html>
